<template>
	<view>
		<view class="type-box" v-if="typesList.length == 4">
			<view class="item-box" v-for="(item, index) in typesList" :key="index"
				@click="$onTo(item.price == undefined ? `/pagesClass-rich/classified1-rich/classified1-rich?id=${item.id}` : `/pagesClass-rich/product/product?productId=${item.productId}`)">
				<view :style="{
                        backgroundImage: 'url(' + bgImgList[index].img + ')',
                        width: '100%',
                        height: '100rpx',
                        backgroundRepeat: 'no-repeat',
                        backgroundSize: '110rpx 98rpx',
                        backgroundPosition: 'center center',
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center'
                    }">
					<image style="width: 70rpx; height: 70rpx;pointer-events:none;" :src="item.bannerIcon" mode="aspectFit"></image>
				</view>
				<!-- <view class="wenzi" :style="{ color: isactive }">{{ jiequStr(item.name)}}</view> -->
				<view class="wenzi" style="font-size: 20rpx;">{{ item.name}}</view>
			</view>
		</view>
		<view class="type-box1" v-else>
			<template v-if="!isSixPiecesDataSta">
				<view class="item-box1" v-for="(item, index) in typesList" :key="index"
					@click="$onTo(item.price == undefined ? `/pagesClass-rich/classified1-rich/classified1-rich?id=${item.id}` : `/pagesClass-rich/product/product?productId=${item.productId}`)">
					<view style="border-radius: 10px">
						<image style="width: 70rpx; height: 70rpx;pointer-events:none;" :src="item.bannerIcon" mode="aspectFit"></image>
					</view>
					<view class="wenzi" :style="{ color: isactive }">{{ jiequStr(item.name)}}</view>
				</view>
			</template>
			<template v-if="!!isSixPiecesDataSta">
				<view class="item-box1" v-for="(item, index) in fiveImgsShowList" :key="index"
					@click="$onTo(item.price == undefined ? `/pagesClass-rich/classified1-rich/classified1-rich?id=${item.id}` : `/pagesClass-rich/product/product?productId=${item.productId}`)">
					<view style="border-radius: 10px">
						<image style="width: 70rpx; height: 70rpx;pointer-events:none;" :src="item.imgss" mode="aspectFit"></image>
					</view>
					<view class="wenzi" :style="{ color: isactive }">{{ jiequStr(item.name)}}</view>
				</view>
			</template>
		</view>
	</view>
</template>
<script>
	// :style="{backgroundImage: 'url('+bgImgList[index].img+')',width: '100%',height: '100rpx',backgroundRepeat: 'no-repeat',backgroundSize: '110rpx 98rpx',backgroundPosition: 'center center',display: 'flex',justifyContent: 'center',alignItems: 'center'}"
	export default {
		name: 'IndexType',
		props: {
			typesList: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				typeList: [],
				isactive: ['black'],
				bgImgList: [{
						img: '../../static/RICHindexType/RICHbackground.png'
					},
					{
						img: '../../static/RICHindexType/RICHbackground1.png'
					},
					{
						img: '../../static/RICHindexType/RICHbackground2.png'
					},
					{
						img: '../../static/RICHindexType/RICHbackground3.png'
					},
					{
						img: '../../static/RICHindexType/RICHbackground4.png'
					},
					{
						img: '../../static/RICHindexType/RICHbackground5.png'
					},
					{
						img: '../../static/RICHindexType/RICHbackground6.png'
					},
					{
						img: '../../static/RICHindexType/RICHbackground7.png'
					},
					{
						img: '../../static/RICHindexType/RICHbackground8.png'
					},
					{
						img: '../../static/RICHindexType/RICHbackground9.png'
					}
				],
				//本地存着写死的图片
				fiveImgsList: [
				],
				fiveImgsShowList: [],
				isSixPiecesDataSta: false, //接口传来的是否是六条数据，如果是六条数据，就取特定的五条数据，且图片用本地写死的图片 
			};
		},
		watch: {},
		created() {
			// this.onList(1563)
			//获取热销数据
			console.log('初始化完成,可以获取到data中的响应式数据,在这里做请求数据和数据绑定的操作;不能获取页面元素(组件还没开始挂在元素)');
		},
		mounted() {
			console.log('10个类型的背景颜色', this.typesList);
			if (this.typesList && this.typesList.length == 6) {
				this.isSixPiecesDataSta = true
				this.fiveImgsShowList = []
				this.typesList.forEach(item => {
					if (item.name == '潮流穿搭' || item.name == '春夏系列' || item.name == '秋冬系列' || item.name == '裤装系列' ||
						item.name == '潮鞋专区') {
						this.$set(item,
							'imgss', this.getImgsFromNama(item.name))
						this.fiveImgsShowList.push(item)
					}
				})
			} else {
				this.isSixPiecesDataSta = false
			}

		},
		methods: {
			jiequStr(str) {
				if (str.toString().length > 6) {
					return str.toString().slice(0, 6);
				} else {
					return str.toString();
				}
			},
			getImgsFromNama(name) {
				let imgss = ''
				this.fiveImgsList.forEach(item => {
					if (item.name == name) {
						imgss = item.imgs
					}
				})
				return imgss
			}
		}
	};
</script>
<style lang="scss" scoped>
	.type-box {
		width: 95%;
		background-color: white;
		overflow: hidden;
		font-size: 22rpx;
		display: flex;
		justify-content: space-evenly;
		flex-wrap: wrap;
		margin: 10rpx auto;
		border-radius: 20rpx;

		.item-box {
			// background-color: white;
			// float: left;
			margin: 10rpx 5rpx 8rpx 5rpx;
			width: 140rpx;
			margin-top: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.wenzi {
				margin: 10rpx 0 20rpx 0;
			}
		}
	}

	.type-box1 {
		background-color: white;
		width: auto;
		overflow: hidden;
		// height: 400px;
		font-size: 22rpx;
		// display: flex;
		// justify-content:space-evenly;
		// flex-wrap: wrap;
		margin: 10rpx 20rpx;
		border-radius: 20rpx;

		.item-box1 {
			float: left;
			margin-top: 20rpx;
			width: 140rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.wenzi {
				margin: 10rpx 0 20rpx 0;
			}
		}
	}
</style>